<template>
  <div  class="news-template-side">
      <h4  class="news-template-side-title test">服务资源</h4>
      <aside class="accordion side-nav js-accordion sample-code" >
        <!-- 父级 -->
        <div :class="['accordion-section',item_index==activeIndex?'is-active':'']" v-for="(item ,item_index) in menus" :key="item_index" @click="link_to(item,item_index)">
          <h4 class="accordion-title" >{{item.title}}</h4>
          <!-- 子级 -->
          <nav class="accordion-content"  v-for="(item2 ,item2_index) in item.childs" :key="item2_index" @click.stop="link_to_child(item2,item2_index)">
            <span  :class="['side-nav-link',item2_index==activeIndexChild?'is-active':'']">{{item2.title}}</span>
          </nav>
        </div>
      </aside>
    </div>
</template>
<script>
  export default {
    props: ['menus'],
    data() {
      return {
        activeIndex:-1,
        activeIndexChild:-1,
      }
    },
    methods:{
      link_to(item,index){
        if(this.activeIndex==index){
          this.activeIndex=-1
        }
        else{
          this.activeIndex=index
          this.activeIndexChild=-1
        }
      },
      link_to_child(item,index){
        this.activeIndexChild=index
        let props=item.props
        if(!props){
          props={}
        }
        Bus.emit('show_services_prop',props,item.title);
      },
    }
  }
</script>
<style>
.accordion {
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #efefef;
    border-top: none;
    font-weight: 400;
    font-style: normal;
    background-color: #ffffff;
}
.side-nav, .dropdown-menu, .filter-dropdown-list {
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #efefef;
    border-top: none;
    font-weight: 400;
    font-style: normal;
    background-color: #ffffff;
}
.accordion-title {
  margin: 0;
  padding: 0.5rem;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5;
  background-color: #f8f8f8;
  border-top: 1px solid #efefef;
  cursor: pointer;
  font-size: 14px;
}
.accordion-title:focus, .accordion-title:hover {
    transition: all, 150ms linear;
    background-color: #f4f4f4;
    outline: none;
}
.accordion-title:before {
    font-size: 0.8125rem;
}
.accordion-section.is-active .accordion-title:before {
  content: "\f127";
}
.accordion-title:before {
    content: "\f171";
}
.accordion-title:before {
    font-family: 'calcite-ui';
    padding-right: 0.5rem;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    text-decoration: none;
}
.accordion-content {
  display: none;
}
.accordion-section.is-active .accordion-content {
  display: block;
}

.side-nav-link.is-active {
    text-indent: -3px;
    border-left: 3px solid #0079c1;
}
.side-nav-link {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0.5rem;
    line-height: 1.5;
    color: #595959;
    background-color: #ffffff;
    border-top: 1px solid #efefef;
    cursor: pointer;
    padding-left: 14px;
    font-size: 14px;
}
.side-nav-link:hover {
    background-color: #f8f8f8;
    text-decoration: none;
    color: #4c4c4c;
}
</style>